import 'package:flutter/material.dart';
import 'package:flutter_bilibili/core/model/live_room_model.dart';
import 'package:flutter_bilibili/ui/pages/live/live_room_play.dart';
import 'package:flutter_bilibili/ui/shared/image_assets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../shared/app_theme.dart';

class HYLiveRoomItem extends StatefulWidget {
  LiveRoomModel liveRoom;

  HYLiveRoomItem(this.liveRoom, {Key? key}) : super(key: key);

  @override
  State<HYLiveRoomItem> createState() => _HYLiveRoomItemState();
}

class _HYLiveRoomItemState extends State<HYLiveRoomItem> {
  final _radius = 6.r;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).pushNamed(HYLiveRoomPlayScreen.routeName,
            arguments: widget.liveRoom.roomid);
      },
      child: SizedBox(
        height: 205.h,
        width: 180.w,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(_radius),
              topRight: Radius.circular(_radius),
            ),
          ),
          child: Column(
            children: [
              Stack(
                children: [
                  buildLiveVideoItemCover(),
                  buildLiveRoomDetails(),
                ],
              ),
              buildLiveRoomTitle(),
              buildLiveRoomZone(),
            ],
          ),
        ),
      ),
    );
  }

  ///视频封面
  Widget buildLiveVideoItemCover() {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(_radius),
        topRight: Radius.circular(_radius),
      ),
      child: Image.network(
        widget.liveRoom.cover,
        width: 180.w,
        height: 120.h,
        fit: BoxFit.fill,
      ),
    );
  }

  ///视频封面处的注释（直播的人、观看人数）
  Widget buildLiveRoomDetails() {
    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Container(
        height: 40.h,
        width: 180.w,
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            Colors.black.withOpacity(.7),
            Colors.transparent,
          ], begin: Alignment.bottomCenter, end: Alignment.topCenter),
        ),
        child: Container(
          height: 40.h,
          width: 180.w,
          padding: const EdgeInsets.symmetric(horizontal: 8).r,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                width: 60.w,
                child: Text(
                  widget.liveRoom.uName,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: HYAppTheme.norWhite02Color,
                      fontSize: HYAppTheme.xxxSmallFontSize),
                ),
              ),
              Row(
                textBaseline: TextBaseline.alphabetic,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.baseline,
                children: [
                  Image.asset(
                    ImageAssets.seenPNG,
                    width: HYAppTheme.xxSmallFontSize,
                    height: HYAppTheme.xxSmallFontSize,
                  ),
                  3.horizontalSpace,
                  Text(
                    widget.liveRoom.watchedShowTextLarge,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: HYAppTheme.norWhite02Color,
                        fontSize: HYAppTheme.xxxSmallFontSize),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget buildLiveRoomTitle() {
    return Container(
      alignment: Alignment.topLeft,
      padding: const EdgeInsets.all(8).r,
      child: Text(
        widget.liveRoom.title,
        style: TextStyle(
            fontSize: HYAppTheme.xSmallFontSize,
            color: HYAppTheme.norTextColors),
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }

  Widget buildLiveRoomZone() {
    return Container(
      alignment: Alignment.topLeft,
      padding: const EdgeInsets.only(
        bottom: 3,
        left: 8,
        right: 8,
      ).r,
      child: Text(
        widget.liveRoom.areaV2Name,
        style: TextStyle(
            fontSize: HYAppTheme.xxSmallFontSize,
            color: HYAppTheme.norGray05Color),
      ),
    );
  }
}
